<template>
    <div id="carPlacePage">
        <el-card>
            <el-container>
                <el-header >
                    <span >车库：</span>
                    <el-select  :value="pageSearch.clauses[0].value"
                                            v-model="pageSearch.clauses[0].value"
                                            @change="searchPayRuleByParkingId"
                                            clearable>
                    <el-option  v-for="item in parkingOption"
                                :key="item.id"
                                :label="item.parkingName"
                                :value="item.id"
                    ></el-option>
                </el-select>
                    <span style="margin-left: 15px">状态：</span>
                    <el-select v-model="pageSearch.clauses[1].value"
                                           :value="pageSearch.clauses[1].value"
                                           @change="search" clearable>
                    <el-option  v-for="item in carPlaceStatusOption"
                                :key="item.id"
                                :label="item.valueDesc"
                                :value="item.id"></el-option>
                </el-select>
                    <span style="margin-left: 15px">类型：</span>
                    <el-select
                            v-model="pageSearch.clauses[2].value"
                            :value="pageSearch.clauses[2].value" @change="search" clearable>
                        <el-option  v-for="item in carPlaceTypeOption"
                                    :key="item.id"
                                    :label="item.valueDesc"
                                    :value="item.id"></el-option>
                    </el-select>
                    <el-button style="float: right" type="primary" @click="addCarPlace">添加车位</el-button>
                </el-header>
                <el-main>
                    <elx-editable
                            ref="editable"
                            height="550px"
                            :header-cell-style="tableHeader"
                            :edit-config="{trigger: 'click', mode: 'cell', activeMethod}"
                            :data.sync="carPlaceList"
                            @edit-disabled="editDisabledEvent"
                    >
                        <elx-editable-column
                                type="index"
                                width="55"></elx-editable-column>
                        <elx-editable-column
                                prop="createDatetime"
                                label="创建时间"
                                width="200"
                                :formatter="dateFormat"
                        >
                        </elx-editable-column>
                        <elx-editable-column
                                prop="updateDatetime"
                                label="更新时间"
                                width="200"
                                :formatter="dateFormat"
                        >
                        </elx-editable-column>
                        <elx-editable-column
                                prop="id"
                                label="id"
                                width="150"></elx-editable-column>
                        <elx-editable-column
                                prop="carPlaceType"
                                label="车位类型"
                                width="120"
                                :edit-render="{name: 'ElSelect',options:carPlaceTypeOption,optionProps:{value:'id',label:'valueDesc'}}"></elx-editable-column>
                        <elx-editable-column
                                prop="carPlaceStatus"
                                label="车位状态"
                                min-width="100"
                                :edit-render="{name: 'ElSelect',options:carPlaceStatusOption,optionProps:{value:'id',label:'valueDesc'}}"></elx-editable-column>
                        <elx-editable-column
                                prop="parkingName"
                                label="所属车场"
                                :show-overflow-tooltip="true"
                                min-width="130">
                        </elx-editable-column>
                        <elx-editable-column
                                prop="payRulesId"
                                label="收费规则"
                                :show-overflow-tooltip="true"
                                min-width="200"
                                :edit-render="{name:'ElSelect',options:payRuleOption,optionProps:{value:'id',label:'payRule'}}"></elx-editable-column>
                        <elx-editable-column
                                label="操作"
                                fixed="right"
                        >
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="updateCarPlace(scope.row)">保存</el-button>
                                <el-button type="text" size="mini" @click="deleteCarPlace(scope.row.id)">删除</el-button>
                            </template>
                        </elx-editable-column>
                    </elx-editable>
                </el-main>
                <el-footer>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSearch.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-footer>
                <el-dialog title="车位添加"
                    :visible.sync="isVisible"
                           width="500px"
                >
                    <el-form v-model="carPlaceModel" label-width="30%">
                        <el-form-item label="所属车库：">
                            <el-select  :value="carPlaceModel.parkingId"
                                        v-model="carPlaceModel.parkingId"
                                        >
                                <el-option  v-for="item in parkingOption"
                                            :key="item.id"
                                            :label="item.parkingName"
                                            :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车位类型：">
                            <select-option select-type="select" code="carPlaceType" v-model="carPlaceModel.carPlaceType"></select-option>
                        </el-form-item>
                        <el-form-item label="数目：">
                            <el-input-number v-model="carPlaceModel.payRulesId" :step="1" :min="1"></el-input-number>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: center">
                        <el-button type="primary" @click="saveCarPlace">保存</el-button>
                    </div>
                </el-dialog>
            </el-container>
        </el-card>
    </div>
</template>
<script>
    import Message from '../../components/messages/index'
    import SelectOption from '../../components/SelectOption.vue'
    export default {
        name:"carPlace",
        data() {
            return {
                tableHeader: {
                    "background-color": "#DCDFE6",
                    "height": "40px"
                },
                carPlaceModel:{
                    parkingId:null,
                    carPlaceStatus:25,
                    carPlaceType:null,
                    payRulesId:null
                },
                isVisible:false,
                carPlaceList: [],
                parkingOption: [],
                carPlaceTypeOption:[],
                carPlaceStatusOption:[],
                payRuleOption:[],
                parkingIdOfUser:[],
                total:0,
                pageSearch: {
                    pageSize: 10,
                    pageNum: 1,
                    clauses: [{
                        column: "parkingId",
                        operation: "=",
                        value: null,
                    }, {
                        column: "carPlaceStatus",
                        operation: "=",
                        value: null,
                    }, {
                        column: "carPlaceType",
                        operation: "=",
                        value: null,
                    },{
                        column: "parkingId",
                        operation: "in",
                        value: null,
                    }],
                },
            }
        },
        methods:{
            addCarPlace(){
                this.isVisible=true;
            },
            saveCarPlace(){
                if(this.carPlaceModel.parkingId===null){
                    Message.warning("请选择所属车库！")
                }else if(this.carPlaceModel.carPlaceType===null){
                    Message.warning("请选择车位类型！")
                }else{
                    this.$http.post("carPlace/addCarPlace",this.carPlaceModel).then((res)=>{
                        if(res.status===200){
                            if(res.data.successful===true){
                                Message.success(res.data.message);
                                this.isVisible=false;
                            }else{
                                Message.warning(res.data.message);
                            }
                        }
                    })
                }
            },
            getCarPlaceList(){
                this.$http.post("/carPlace/page",this.pageSearch).then((res)=>{
                    if(res.status===200){
                        this.carPlaceList=res.data.list;
                        this.total=res.data.total;
                        for(let i=0;i<this.carPlaceList.length;i++){
                            for(let j=0;j<this.parkingOption.length;j++){
                                if(this.parkingOption[j]["id"]===this.carPlaceList[i]["parkingId"]){
                                    this.carPlaceList[i].parkingName=this.parkingOption[j]["parkingName"];
                                }
                            }
                        }
                    }
                })
            },
            updateCarPlace(val){
                this.$http.post("/carPlace/update",val).then((res)=>{
                    if(res.status===200){
                        Message.success("修改成功");
                    }else{
                        Message.error("修改失败");
                    }
                })
            },
            dateFormat(row,column){
                let date=row[column.property];
                if (date === undefined) {
                    return "";
                }
                return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
            },
            deleteCarPlace(val){
                Message.confirm2("确认删除该车位？","warning").then(()=>{
                    this.$http.get("/carPlace/delete/"+val).then((res)=>{
                        if(res.status===200){
                            Message.success("删除成功");
                            this.getCarPlaceList();
                        }
                    })
                })
            },
            getSelections(){
                let self = this;
                self.$http.post("coder/getCoderByeCodeKey",{codeKey:"carPlaceType"}).then((res)=>{
                    if(res.status===200){
                        self.carPlaceTypeOption=res.data;
                    }
                });
                self.$http.post("coder/getCoderByeCodeKey",{codeKey:"carPlaceStatus"}).then((res)=>{
                    if(res.status===200){
                        self.carPlaceStatusOption=res.data;
                    }
                });
            },
            InitList(){
                let userId = JSON.parse(localStorage.getItem('user'));
                let self = this;
                if(userId.roleId===1){
                    self.$http.get("parking/getParkingListNameAndId").then((res)=>{
                        if(res.status===200){
                            self.parkingOption=res.data;
                            this.getCarPlaceList();
                        }
                    });
                }else if(userId.roleId===2){
                    self.$http.get("/parking/getParkingOfUser/"+userId.id).then((res)=>{
                        if(res.status===200){
                            self.parkingOption=res.data;
                            for(let i=0;i<res.data.length;i++){
                                self.parkingIdOfUser.push(res.data[i].id);
                            }
                            if(self.parkingIdOfUser.length>0){
                                self.pageSearch.clauses[3].value=self.parkingIdOfUser;
                            }else{
                                self.pageSearch.clauses[3].value=[-1];
                            }
                            this.getCarPlaceList();
                        }
                    })
                }

            },
            handleSizeChange(val){
                this.pageSearch.pageSize=val;
                this.getCarPlaceList();
            },
            handleCurrentChange(val){
                this.pageSearch.pageNum=val;
                this.getCarPlaceList();
            },
            search(){
                this.pageSearch.pageNum=1;
                this.pageSearch.pageSize=10;
                this.getCarPlaceList();
            },
            searchPayRuleByParkingId(){
                this.pageSearch.pageNum=1;
                this.pageSearch.pageSize=10;
                if(this.pageSearch.clauses[0].value){
                    this.$http.get("payRules/getRuleListByParkingId/"+this.pageSearch.clauses[0].value).then((res)=>{
                        if(res.status===200){
                            this.payRuleOption=res.data;
                        }
                    });
                }
                this.getCarPlaceList();
            },
            activeMethod ({ column }) {
                let status=true;
                if(['payRulesId'].includes(column.property)){
                    if(this.pageSearch.clauses[0].value==null||this.pageSearch.clauses[0].value===""){
                        status=false;
                    }
                }
                return status
            },
            editDisabledEvent(){
                Message.warning("请先选择车库,再查看编辑");
            },
            hasAdd(){
                this.pageSearch.clauses[0].value=this.$route.params.form.id;
                // this.parkingOption.push(this.$route.params.form);
                this.$http.get("parking/getParkingListNameAndId").then((res)=>{
                    if(res.status==200){
                        this.parkingOption=res.data;
                        this.getCarPlaceList();
                    }
                });
                this.searchPayRuleByParkingId();
            }
        },
        mounted() {
            if(this.$route.params.form){//如果由添加车库跳转过来
                console.log("车库添加跳转进入")
                this.getSelections();
                this.hasAdd();
            }else{
                console.log("菜单进入");
                this.getSelections();
                this.InitList();
            }
        },
        components:{SelectOption}
    }
</script>
<style scoped lang="less">
    #carPlacePage{
        color: #606266
    }
</style>